<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>地球人的个人信息</title>
    </head>

    <body>
        <div id="app">
            <h1>地球人的个人信息</h1>

            姓名: <input type="text" v-model="name">
            <br>
            <br>

            是否单身: <input type="checkbox" v-model="isSingle">
            <br>
            <br>

            性别: <input v-model="gender" type="radio" name="gender" value="1">男
                 <input v-model="gender" type="radio" name="gender" value="2">女
                 <!-- 单选框分为一组需要使用name属性 -->
                 <br><br>

            所在城市: 
            <select v-model="city">
                <option value="101">北京</option>
                <option value="102">上海</option>
                <option value="103">南京</option>
                <option value="104">成都</option>
            </select>
            <br><br>
            
            自我描述: <br>
            <textarea v-model="des"></textarea>
        </div>

        <script src="./Vue2/vue.js"></script>

        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    name: '',
                    isSingle: false,
                    gender: '1',
                    city: '',
                    des: ''
                },
                methods: {

                }
            })
        </script>
    </body>
</html>